<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>axios&#x5de5;&#x5177;</title>
        <style>
/* From extension vscode.github */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.vscode-dark img[src$=\#gh-light-mode-only],
.vscode-light img[src$=\#gh-dark-mode-only] {
	display: none;
}

</style>
        
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
<style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>
        <style>
.task-list-item {
    list-style-type: none;
}

.task-list-item-checkbox {
    margin-left: -20px;
    vertical-align: middle;
    pointer-events: none;
}
</style>
        
    </head>
    <body class="vscode-body vscode-light">
        <ul>
<li><a href="#axios%E5%B7%A5%E5%85%B7">axios工具</a>
<ul>
<li><a href="#%E4%BB%8B%E7%BB%8D">介绍</a></li>
<li><a href="#%E4%BD%BF%E7%94%A8">使用</a></li>
</ul>
</li>
</ul>
<h1 id="axios工具">axios工具</h1>
<h2 id="介绍">介绍</h2>
<blockquote>
<p>这个库是一个对<strong>axios</strong>的二次封装,让请求能够预先定义好,需要发送的时候再使用对应的方法。更好的支持<strong>RESTful</strong>风格的请求,另外还支持根据自定义响应状态码映射表调用对应的方法</p>
</blockquote>
<pre><code class="language-ts">  <span class="hljs-comment">//响应体必须为这种格式</span>
  <span class="hljs-keyword">type</span> <span class="hljs-title class_">Data</span> = {
    <span class="hljs-attr">data</span>:<span class="hljs-built_in">any</span>
    <span class="hljs-attr">code</span>:<span class="hljs-built_in">number</span>
    <span class="hljs-attr">msg</span>:<span class="hljs-built_in">string</span>
  } 
  
</code></pre>
<h2 id="使用">使用</h2>
<pre><code class="language-js"><span class="hljs-keyword">import</span> { createAxios } form <span class="hljs-string">&#x27;baxios&#x27;</span>
<span class="hljs-keyword">const</span> config = {
  <span class="hljs-attr">baseURL</span>: location.<span class="hljs-property">origin</span> + <span class="hljs-string">&#x27;/api/&#x27;</span>,
  <span class="hljs-attr">withCredentials</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>
}
<span class="hljs-comment">// 响应状态码映射</span>
<span class="hljs-keyword">const</span> codeMap = {
  <span class="hljs-string">&#x27;200&#x27;</span>:<span class="hljs-string">&quot;成功&quot;</span>,
  <span class="hljs-string">&#x27;404&#x27;</span>:<span class="hljs-string">&quot;没有查询到数据&quot;</span>
}
<span class="hljs-keyword">const</span> request = axios.<span class="hljs-title function_">create</span>(config)
<span class="hljs-keyword">const</span> baxios = <span class="hljs-title function_">createBAxios</span>({
  ...config
},codeMap)
<span class="hljs-comment">// 创建请求 未发送 在这里设置完uri 路径过后</span>
<span class="hljs-keyword">let</span> test = <span class="hljs-title function_">baxios</span>(<span class="hljs-string">&quot;uri&quot;</span>)

<span class="hljs-comment">/**
 * 另外baxios 上还可以绑定几个事件
 *  onErrMsg: (callback: (msg: string) =&gt; void) =&gt; void;
 *  onSuccMsg: (callback: (msg: string) =&gt; void) =&gt; void;
 *  onReqError: (callback: (err: import(&#x27;axios&#x27;).AxiosError) =&gt; void) =&gt; void;
 *  onResError: (callback: (err: import(&#x27;axios&#x27;).AxiosError) =&gt; void) =&gt; void;
 * **/</span>
<span class="hljs-comment">// 真实发送 这里的方法不能设置uri 路径</span>
<span class="hljs-comment">// 返回promise 且若是不报错的话 直接返回response 里的data</span>
test.<span class="hljs-title function_">get</span>()
test.<span class="hljs-title function_">post</span>()
test.<span class="hljs-title function_">postForm</span>()
</code></pre>

        
        
    </body>
    </html>